<template>
  <section class="todoapp">
   <TodoHeader
   @addFn="add"/>
   <TodoMain
   :arr="switch_list"
   @delFn="delOne"/>
   <TodoFooter
   v-show="list.length > 0"
   :arr="list"
   @changSome="changeFn"
   @clearFn="clearAll"/>
  </section>
</template>

<script>
import './assets/css/base.css'
import './assets/css/index.css'

import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  data() {
    return {
      list: JSON.parse(window.localStorage.getItem('todos'))|| 
      [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
      type:'all'
    };
  },
  watch:{
  list:{
   deep:true,
   handler(newVal) {
    window.localStorage.setItem('todos',JSON.stringify(newVal))
   }
  }
  },
 components:{
  TodoHeader,
  TodoMain,
  TodoFooter
 },
 methods: {
  add(name) {
   let obj = {
    id:Date.now(),
    name,
    isDone:false
   }
   this.list.push(obj)
  },
  delOne(index) {
   this.list.splice(index,1)
  },
  changeFn(Intype){
   this.type = Intype
  },
  clearAll() {
  this.list = this.list.filter(item => item.isDone == false)
  }
 },
 computed: {
  switch_list() {
   if(this.type === 'all') {
    return this.list
   }else if(this.type === 'no') {
    return this.list.filter(item => item.isDone === false)
   }else {
    return this.list.filter(item => item.isDone === true)
   }
  }
 }
}
</script>

<style>

</style>